<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryForm" size="small" :model="queryParams">
        <el-row type="flex" style="flex-wrap:wrap;width:82%;">
          <el-col class="cols">
            <el-form-item prop="phoneNumber">
              <el-input v-model="queryParams.phoneNumber" placeholder="绑定手机：请输入手机号" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>
          <el-col class="cols">
            <el-form-item prop="accountDescription">
              <el-input v-model="queryParams.accountDescription" placeholder="账号描述：请输入账号描述" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>
          <el-col class="cols">
            <el-form-item prop="account">
              <el-input v-model="queryParams.account" placeholder="账号：请输入账号" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="recycleChannelId">
              <el-select filterable v-model="queryParams.recycleChannelId" clearable
                         placeholder="回收渠道：请选择回收渠道"  @change="getList(1)">
                <el-option v-for="item in recycleChannelList" :key="item.dictCode" :label="item.dictLabel"
                           :value="item.dictCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="orderNumber">
              <el-input v-model="queryParams.orderNumber" placeholder="回收编号：请输入回收编号" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="shelfNumber">
              <el-input v-model="queryParams.shelfNumber" placeholder="上架编号：请输入上架编号" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="keywords">
              <el-input v-model="queryParams.keywords" placeholder="关键词：请输入关键词" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="status">
              <el-select filterable v-model="queryParams.status" clearable placeholder="状态：请选择状态"
                         @change="getList(1)">
                <el-option v-for="item in stockStatusList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="recycleName">
              <el-select filterable v-model="queryParams.recycleName" clearable placeholder="回收客服"
                         @change="getList(1)">
                <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                           :value="item.userName"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="identifying">
              <el-input v-model="queryParams.identifying" placeholder="账号编号：请输入账号编号" clearable
                        @keyup.enter.native="getList(1)"/>
            </el-form-item>
          </el-col>
          <el-col class="cols">
            <el-form-item prop="supplier">
              <el-select filterable v-model="queryParams.supplier" clearable placeholder="供货商：请选择供货商"
                         @change="getList(1)">
                <el-option v-for="item in supplyData" :key="item" :label="item"
                           :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btns">
          <!--刷新-->
          <div class="wrap" @click="getList('')">
            <img src="../../../assets/images/refresh.png"/>
          </div>

          <!--重置-->
          <div class="wrap" @click="resetQuery">
            <img src="../../../assets/images/search.png"/>
          </div>
        </div>
      </el-form>

      <!--单选分类查询-->
      <el-radio-group v-model="queryParams.dictCodeId" @input="getList(1)">
        <el-radio label="">全部</el-radio>
        <el-radio v-for="item in gameList" :label="item.dictCode" :key="item.dictCode">{{ item.dictLabel }}</el-radio>
      </el-radio-group>
    </div>

    <!--工具栏-->
    <div class="tool">
      <span class="tag">库存管理列表</span>
      <div class="tool-btn">
        <div class="tool-btn-item" @click="handleToDo" v-hasPermi="['business:stock:updatePercentage']">添加待处理</div>
        <div class="tool-btn-item" @click="isPercentage = true" style="margin-left: 10px;"
             v-hasPermi="['business:stock:updatePercentage']">修改价格
        </div>
        <div class="tool-btn-item" @click="patchUp" style="margin-left: 10px;"
             v-hasPermi="['business:automatic_shelves:bulk_listings']">批量上架
        </div>
        <div class="tool-btn-item" style="margin: 0 10px;" @click="patchDown"
             v-hasPermi="['business:automatic_shelves:bulk_delisting']">批量下架
        </div>
        <el-button type="primary" @click="handleExport" v-hasPermi="['business:stock:export']">导出</el-button>
        <el-button type="primary" @click="handleAdd" v-hasPermi="['business:stock:add']">新增<i
          class="el-icon-plus el-icon--right"></i></el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="70" align="center"/>
      <el-table-column label="编号" align="center" width="60">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="区服" align="center" prop="region" min-width="100"/>
      <el-table-column label="状态" align="center" prop="status" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="status normal">未 售</span> <span v-if="scope.row.status == 2"
                                                                                      class="status tradingIn">已 售</span>
          <span v-if="scope.row.status == 3" class="status soldOut">异 常</span> <span v-if="scope.row.status == 4"
                                                                                       class="status abnormal">交易中</span>
          <span v-if="scope.row.status == 5" class="status cancelled">下架</span>
        </template>
      </el-table-column>
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="80"/>
      <el-table-column label="账号描述" prop="accountDescription" min-width="200" align="center"
                       :show-overflow-tooltip="true"/>
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="100"/>
      <!--      <el-table-column label="换绑客服" align="center" prop="changeName" min-width="80"/>-->
      <!--      <el-table-column label="回收客服" align="center" prop="recycleName" min-width="80"/>-->
      <el-table-column label="供货商家" align="center" prop="supplier" min-width="80"/>
      <el-table-column label="上架编号" min-width="150" align="center" prop="shelfNumber">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <div v-if="scope.row.shelfNumber != null">
              <shelf-number-row v-for="(line, index) in scope.row.shelfNumber.split(/\n/g)" :key="index" :line="line"/>
            </div>
            <div slot="reference" class="hover-slot-line">{{ scope.row.shelfNumber }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="回收编号" align="center" prop="orderNumber" min-width="160"
                       :show-overflow-tooltip="true"/>
      <el-table-column label="入库时间" align="center" prop="storageTime" min-width="140">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.storageTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template v-if="scope.row.end !== 1" slot-scope="scope">
          <el-button v-if="scope.row.status == 1 && (scope.row.supplier == '自营' || scope.row.supplier == null)"
                     size="mini" type="text" @click="handleNotation(scope.row)"
                     v-hasPermi="['business:stock:notation']">
            <span style="color: rgba(83, 90, 244, 1);"> 提号 </span>
          </el-button>
          <el-button v-if="scope.row.status == 1 || scope.row.status == 2" size="mini" type="text"
                     @click="handleDelete(scope.row)" v-hasPermi="['business:stock:question']">
            <span style="color: rgba(83, 90, 244, 1);">转问题 </span>
          </el-button>
          <el-button v-if="scope.row.status == 1" size="mini" type="text" @click="handleUpdate(scope.row)"
                     v-hasPermi="['business:stock:edit']">
            <span style="color: rgba(83, 90, 244, 1);">修改</span>
          </el-button>
          <el-button size="mini" type="text" @click="handleView(scope.row)" v-hasPermi="['business:stock:view']">
            <span style="color: rgba(83, 90, 244, 1);">查看</span>
          </el-button>
          <el-button
            v-if="(scope.row.status == 5 || scope.row.status == 1) && (scope.row.supplier !== '自营' && scope.row.supplier !== null)"
            size="mini" type="text" @click="submitOrder(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">下单 </span>
          </el-button>
          <el-button v-if="scope.row.status == 5" size="mini" type="text" @click="delectById(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">删除 </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList('')"/>


    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="myfroms">
        <div class="mytxt">
          <el-row>
            <el-col :span="8">
              <el-form-item label="游戏品类" prop="dictCodeId">
                <el-select filterable :disabled="disabled" v-model="form.dictCodeId" placeholder="请选择游戏品类"
                           @change="handleGameCategoryChange">
                  <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="区服" prop="region">
                <el-select filterable :disabled="disabled" v-model="form.region" placeholder="请选择区服">
                  <el-option v-for="item in regionalServers" :key="item.gameField" :label="item.gameField"
                             :value="item.gameField"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" >
              <el-form-item label="回收编号" prop="orderNumber" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input :disabled="disabled" v-model="form.orderNumber" placeholder="请输入回收编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="账号" prop="account">
                <el-input :disabled="disabled" v-model="form.account" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="密码" prop="password">
                <el-input :disabled="disabled" v-model="form.password" placeholder="请输入密码"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId" v-if="form.supplier=='自营' || form.supplier ==null ">
                <el-select filterable :disabled="disabled" v-model="form.recycleChannelId" placeholder="请选择回收渠道">
                  <el-option v-for="  item   in   recycleChannelList  " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="账号描述" prop="accountDescription">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.accountDescription" placeholder="请输入账号描述"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button :disabled="!form.accountDescription || !form.dictCodeId" type="primary" plain
                           @click="handleDealAccounts('accountDescription')">自动识别
                </el-button>
                <el-button :disabled="!form.dictCodeId" type="primary" plain
                           :loading="loading" @click="getWzpfs">皮肤获取
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="副标题" prop="description">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.description" placeholder="请输入副标题"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收金额" prop="recycleAmount" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input :disabled="disabled" v-model="form.recycleAmount" placeholder="请输入回收金额"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="销售金额" prop="saleAmount">
                <el-input :disabled="disabled" v-model="form.saleAmount" placeholder="请输入销售金额"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定类目" prop="bindingChannelId" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" @change="changeChannel" v-model="form.bindingChannelId"
                           placeholder="请选择绑定类目">
                  <el-option v-for="  item   in   bindingChannelList  " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定手机" prop="phoneName"   v-if="form.supplier=='自营' || form.supplier ===null">
                <el-select filterable :disabled="disabled" @change="changePhone" filterable v-model="form.phoneId"
                           placeholder="请选择绑定手机">
                  <el-option v-for="(item, indx) in phoneList" :key="indx" :label="item.phoneNumber"
                             :value="item.phoneId"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手机编号" prop="phoneCode"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input disabled v-model="form.phoneCode" placeholder="请先选择绑定手机号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" v-model="form.changeId" placeholder="请选择换绑客服">
                  <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName"
                             :value="item.userId"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleId"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" v-model="form.recycleId" placeholder="请选择回收客服">
                  <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="上架编号" prop="shelfNumber">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.shelfNumber" placeholder="请输入上架编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="通用图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.imagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'imagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.imagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="螃蟹图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pxImagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'pxImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pxImagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess2" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="盼之图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pzImagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'pzImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pzImagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess3" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="mystatu">
          <p v-if="form.dictCodeId">属性信息</p>

          <div v-for="(child, ii) in result" :key="ii" class="render" v-if="form.dictCodeId">
            <!--下拉框-->
            <el-form-item v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'dropDown_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-select filterable :disabled="disabled" v-model="form['dropDown_' + child.id]">
                <el-option v-for="(item, indx) in child.children" :key="indx" :label="item.gameField"
                           :value="parseInt(item.id)"/>
              </el-select>
            </el-form-item>

            <!--输入框-->
            <div style="display: flex; flex-wrap: wrap; gap: 10px;" class="yingdi_input"
                 v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0">
              <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField"
                            :prop="'inputValues_' + item.id"
                            :rules="{ required: child.isRequired == 1 ? true : false, message: item.gameField + '不能为空', trigger: 'blur' }">
                <el-input :disabled="disabled" placeholder="请输入" v-model="form['inputValues_' + item.id]"></el-input>
              </el-form-item>
            </div>

            <!--radio 单选框-->
            <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'radioValues_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-radio-group :disabled="disabled" v-model="form['radioValues_' + child.id]">
                <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                  {{ option.gameField }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--checkbox 多选框-->
            <el-form-item v-if="child && child.fieldType === 'checkbox' && child.children" :label="child.gameField"
                          :prop="'checkbox_' + child.gameKey"
                          :rules="[{ type: 'array', required: child.isRequired == 1 ? true : false, message: '请至少选择一个' + child.gameField, trigger: 'change' }]">
              <el-checkbox-group v-model="form['checkbox_' + child.gameKey]"
                                 v-if="child.gameKey && form['checkbox_' + child.gameKey]">
                <el-checkbox :disabled="disabled" v-for="(item, indx) in child.children" :key="indx" :label="item.id">
                  {{ item.gameField }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-top: 0;padding-bottom: 15px;">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="!disabled && (form.supplier==='自营' ||form.supplier===null )" type="primary" @click="submitForm('mark')">确 定</el-button>
        <el-button v-if="!disabled && (form.supplier!='自营' && form.supplier !==null)" type="primary" @click="submitForm('supplier')">确 定</el-button>
      </div>
    </el-dialog>

    <!--  提示音-->
    <audio :src="audiofile" id="audio" controls="controls" @click="playaudio()" display="none"></audio>

    <!-- 提号对话框 -->
    <el-dialog title="提号" :visible.sync="openNotation" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="formNotation" :model="formNotation" :rules="rules" label-width="120px">
        <el-form-item label="销售渠道：" prop="saleChannelId">
          <el-select filterable v-model="formNotation.saleChannelId" placeholder="请选择销售渠道" filterable
                     @change="handleSaleChannelChange" style="width: 300px;">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
                       :value="item.dictCode"/>
          </el-select>
        </el-form-item>

        <el-form-item label="结算公式：">
          <el-input disabled v-model="formNotation.salesRemark" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="销售编号：" prop="saleId">
          <el-input v-model="formNotation.saleId" placeholder="请输入销售编号" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="销售金额：" prop="saleAmount">
          <el-input v-model="formNotation.saleAmount" placeholder="请输入销售金额" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="销售客服：" prop="salesCustomerId"
                      :rules="{ required: true, message: '销售客服不能为空', trigger: 'change' }">
          <el-select filterable v-model="formNotation.salesCustomerId" placeholder="请选择销售客服" filterable
                     style="width: 300px;" @change="playaudio">
            <el-option v-for="item in sellList" :key="item.userId" :label="item.userName" :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="换绑客服：" prop="changeId"
                      :rules="{ required: true, message: '换绑客服不能为空', trigger: 'change' }">
          <el-select filterable :disabled="disabled" v-model="formNotation.changeId" placeholder="请选择换绑客服"
                     style="width: 300px;">
            <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName" :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="订单备注：" prop="orderRemark">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
                    style="width: 300px;" placeholder="请输入订单备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelNotation">取 消</el-button>
        <el-button type="primary" @click="submitFormNotation" :disabled="getCodeShow">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 订单提交 -->
    <el-dialog title="下单" :visible.sync="submitorderF" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="formSubmitorder" :model="formSubmitorder" :rules="rules" label-width="120px">
        <el-form-item label="销售渠道：" prop="saleChannelId">
          <el-select filterable v-model="formSubmitorder.saleChannelId" placeholder="请选择销售渠道" filterable
                     @change="handleSaleChannelChange" style="width: 300px;">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
                       :value="item.dictCode"/>
          </el-select>
        </el-form-item>

        <el-form-item label="结算公式：">
          <el-input disabled v-model="formSubmitorder.salesRemark" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="销售编号：" prop="saleId">
          <el-input v-model="formSubmitorder.saleId" placeholder="请输入销售编号" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="销售金额：" prop="saleAmount">
          <el-input v-model="formSubmitorder.saleAmount" placeholder="请输入销售金额" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="供货金额" prop="suAmount">
          <el-input v-model="formSubmitorder.suAmount" placeholder="请输入销售金额" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="销售客服：" prop="salesCustomerId"
                      :rules="{ required: true, message: '销售客服不能为空', trigger: 'change' }">
          <el-select filterable v-model="formSubmitorder.salesCustomerId" placeholder="请选择销售客服" filterable
                     style="width: 300px;">
            <el-option v-for="item in sellList" :key="item.userId" :label="item.userName" :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="换绑客服：" prop="changeId"
                      :rules="{ required: true, message: '换绑客服不能为空', trigger: 'change' }">
          <el-select filterable :disabled="disabled" v-model="formSubmitorder.changeId" placeholder="请选择换绑客服"
                     style="width: 300px;">
            <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName" :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="订单备注：" prop="orderRemark">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formSubmitorder.orderRemark"
                    style="width: 300px;" placeholder="请输入订单备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelresetformSubmitorder">取 消</el-button>
        <el-button type="primary" @click="sformSubmitorder" :disabled="getSubmitorder">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 转问题对话框 -->
    <el-dialog title="转问题" :visible.sync="openProblem" width="480px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="ruleProblem" label-width="100px">
        <el-form-item label="问题类型：" prop="problemType">
          <el-select filterable v-if="form.status == 1" v-model="form.problemType" placeholder="请选择问题类型">
            <el-option label="未售找回" value="UnsoldRecovered"></el-option>
            <el-option label="未售异常" value="UnsoldException"></el-option>
          </el-select>
          <el-select filterable v-else v-model="form.problemType" placeholder="请选择问题类型">
            <el-option label="已售找回" value="SoldRecovered"></el-option>
            <el-option label="已售异常" value="SoldException"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="异常原因：" prop="abnormityReason">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.abnormityReason"
                    placeholder="请输入异常原因"/>
        </el-form-item>

        <el-form-item label="上传截图：" prop="upload">
          <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.images" :src="form.images" class="avatar"> <i v-else
                                                                          class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelProblem">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改价格弹框 -->
    <el-dialog title="修改价格" :visible.sync="isPercentage" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="Percentageform" :model="Percentageform" label-width="140px">
        <el-form-item label="价格百分比(%)：" prop="percentage"
                      :rules="{ required: true, message: '价格百分比不能为空', trigger: 'blur' }">
          <el-input-number v-model="Percentageform.percentage" :step="1" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="价格类型：" prop="status"
                      :rules="{ required: true, message: '价格类型不能为空', trigger: 'change' }">
          <el-radio v-model="Percentageform.status" :label="1">增加</el-radio>
          <el-radio v-model="Percentageform.status" :label="2">减少</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelPercentage">取 消</el-button>
        <el-button type="primary" @click="confirmUpdatePercentage">确 定</el-button>
      </div>
    </el-dialog>

    <!--自动上架-->
    <el-dialog title="自动上架" :visible.sync="shelveOpen" width="480px" append-to-body :close-on-click-modal="false">
      <div style="text-align: center;"> <!-- 添加这个容器并设置居中 -->
        <el-progress type="circle" :percentage="progress"></el-progress>
        <div>{{ JSON.stringify(progressMsg) }}</div>
      </div>
    </el-dialog>

    <!--查看-->
    <staylnventory-view ref="staylnventoryView" :obj="form" v-if="viewShow && form.id"/>
  </div>
</template>

<script>

import ShelfNumberRow from '@/components/ShelfNumberRow.vue';
import {
  notation,
  listManagement,
  getManagement,
  delManagement,
  addManagement,
  supplierUpdate,
  unboundPhonesByCategory,
  update,
  submitOrder,
  updatePercentage, pendings, getSupplier
} from '@/api/business/staylnventory'
import env from "@/utils/config.js";
import {getInfo, listDict} from '@/api/business/gameDict.js'
import {getGameDict, refreshCache} from '@/api/business/recyleGameDict.js';
import {pushAdd, pushDele, getWzpf} from '@/api/business/api.js'
import {myMixins} from "@/mixins/index.js";
import {
  bulkListings, bulkDelisting, getProgress
} from "@/api/business/processed";
import staylnventoryView from "@/components/staylnventoryView/index.vue";
import {getSkin} from "@/api/business/staylnventory";

export default {
  name: 'Management',
  mixins: [myMixins],
  components: {staylnventoryView, ShelfNumberRow},
  // el:'app',
  data() {
    return {
      audiofile: '../assets/video/duanxin.mp3',//提号短信提示音
      ispalyaudio: false,//是否播放短信提示音
      progressMsg: {},
      progress: 0,
      isPercentage: false,//修改价格
      shelveOpen: false, // 批量
      getCodeShow: false,//提号状态控制
      getSubmitorder: false,//提号状态控制
      viewShow: false,
      disabled: false,
      // yingdiId:'',// 营地返回信息
      imgUrl: '',//上传图片地址
      list: '',
      isbtn: false,//皮肤获取隐藏
      currentSelection: [],
      //区服列表
      regionalServers: [],
      // 单选
      radioSelections: {},
      // 属性配置回显
      result: [],
      //销售渠道
      saleChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //绑定手机列表
      phoneList: [],
      //换绑客服
      changeList: [],
      //回收客服
      recycleList: [],
      //销售客服
      sellList: [],
      //二次实名
      secondaryRealNameList: [],
      //回收列表
      recycleChannelList: [],
      //渠道列表
      bindingChannelList: [],
      //游戏列表
      gameList: [],
      activeGame: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      managementList: [
        {}
      ],
      //当前绑定的手机号和渠道
      bindingChannelId: '',
      phoneData: {
        phoneCode: null,
        phoneId: null,
        phoneNumber: null
      },
      // 弹出层标题
      title: '',
      // 是否显示新增弹出层
      open: false,
      // 是否显示提号弹出层
      openNotation: false,
      //  是否显示订单提交弹框
      submitorderF: false,
      // 是否显示转问题弹出层
      openProblem: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phoneNumber: null,
        accountDescription: null,
        account: null,
        recycleChannelId: null,
        orderNumber: null,
        status: "1",
        keywords: null,
        dictCodeId:''
      },
      // 表单参数
      form: {
        checkList: [],
        imagess: []
      },
      // 提号表单参数
      formNotation: {},
      // 订单提交弹框
      formSubmitorder: {},
      //修改价格参数
      Percentageform: {
        percentage: 1,
        status: 1
      },
      // 表单校验
      rules: {
        dictCodeId: [
          {required: true, message: '游戏品类不能为空', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '区服不能为空', trigger: 'change'}
        ],
        recycleChannelId: [
          {required: true, message: '回收渠道不能为空', trigger: 'change'}
        ],
        orderNumber: [
          {required: true, message: '回收编号不能为空', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        accountDescription: [
          {required: true, message: '账号描述不能为空', trigger: 'blur'}
        ],
        recycleAmount: [
          {required: true, message: '回收金额不能为空', trigger: 'blur'}
        ],
        saleAmount: [
          {required: true, message: '销售金额不能为空', trigger: 'blur'}
        ],
        bindingChannelId: [
          {required: true, message: '绑定类目不能为空', trigger: 'change'}
        ],
        changeId: [
          {required: true, message: '换绑客服不能为空', trigger: 'blur'}
        ],
        recycleId: [
          {required: true, message: '回收客服不能为空', trigger: 'blur'}
        ],
        remark: [
          {required: true, message: '备注不能为空', trigger: 'blur'}
        ],
        saleChannelId: [
          {required: true, message: '销售渠道不能为空', trigger: 'change'}
        ],
        saleId: [
          {required: true, message: '销售编号不能为空', trigger: 'blur'}
        ]
      },
      ruleProblem: {
        problemType: [
          {required: true, message: '请选择问题类型', trigger: 'change'}
        ],
        abnormityReason: [
          {required: true, message: '异常原因不能为空', trigger: 'blur'}
        ]
      },
      supplyData: []
    }
  },
  created() {
    this.imgUrl = env;
    this.getList()
    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询绑定渠道字典
    this.getDicts('binding_channel').then(res => {
      this.bindingChannelList = res.data
    })
    //查询二次实名字典
    this.getDicts('secondary_real_name').then(res => {
      this.secondaryRealNameList = res.data
    })
    //查询状态字典
    this.getDicts('stock_status').then(res => {
      this.stockStatusList = res.data
    })
    //查询回收渠道字典
    this.getDicts('recycle_channel').then(res => {
      this.recycleChannelList = res.data
    })
    //查询销售渠道
    this.getDicts('sale_channel').then(res => {
      this.saleChannelList = res.data
    })
    //查询回收客服
    this.passPost('recycle').then(res => {
      this.recycleList = res.data
    })
    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    });

    this.getSuppliers();
  },
  methods: {
    // 获取供应商
    getSuppliers() {
      getSupplier().then(res => {
        this.supplyData = res.data;
      })
    },

    //提号短信提示音
    playaudio() {
      this.ispalyaudio = true;
      this.$refs.audio.play();
    },

    // 提号 销售渠道展示
    handleSaleChannelChange(e) {
      let dict = this.saleChannelList.find(i => i.dictCode == e);
      if (dict) this.formNotation.salesRemark = dict.remark;
      if (dict) this.formSubmitorder.salesRemark = dict.remark;
    },

    // 添加待处理
    handleToDo() {
      if (this.ids.length == 0) return this.$message.error('请选择一条记录！');
      pendings(this.ids).then(res => {
        if (res.code == 200) {
          this.$message.success('添加待处理成功！');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      })
    },
    // api上架
    apiPushAdd() {
      if (this.ids.length == 0) return this.$message.error('请选择一条记录！');
      pushAdd(this.ids).then(res => {
        if (res.code == 200) {
          this.$message.success('上架完成');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // api下架
    pushDele() {
      if (this.ids.length == 0) return this.$message.error('请选择一条记录！');
      pushDele(this.ids).then(res => {
        if (res.code == 200) {
          this.$message.success('下架');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 添加待处理
    handleDealAccounts(type) {
      if (this.result.length > 0) {
        this.result.map(item => {
          if (item.fieldType == 'checkbox' && item.children && item.children.length > 0) {
            let children = item.children;
            children.map(ii => {
              if (this.form[type] && this.form[type].indexOf(ii.gameField) > -1) {
                if (this.form['checkbox_' + item.gameKey] && !this.form['checkbox_' + item.gameKey].includes(ii.id)) {
                  this.form['checkbox_' + item.gameKey].push(ii.id);
                }
              }
            })
          }
        })
      }
    },

    // 营地id查询
    getWzpfs() {
      // 获取营地id
      let that = this;
      const inputs = document.getElementsByClassName("yingdi_input");
      for (let i = 0; i < inputs.length; i++) {
        const labelText = inputs[i].getElementsByTagName('label')[0].innerHTML;
        if (labelText == '营地ID') {
          const val = inputs[i].getElementsByTagName("input")[0].value;
          if (val) {
            that.loading = true;
            getSkin(val).then(res => {
              this.loading = false;
              if (res.code == 200) {
                that.form.description = res.msg;
                that.handleDealAccounts('description');
              } else {
                that.$message.error(res.msg);
              }
            }).catch(() => {
              that.loading = false;
            })
          }
        }
      }
    },

    formatShelfNumberWithCopyButtons(shelfNumber) {
      const htmlString = shelfNumber.split(/\n/g)
        .map((line, index) => `<span id="shelfNumberRow-${index}">${line} <button id="copyButton-${index}">复制</button></span>`)
        .join('<br>');

      this.$nextTick(() => {
        shelfNumber.split(/\n/g).forEach((_, index) => {
          const button = document.getElementById(`copyButton-${index}`);
          if (button) {
            button.addEventListener('click', () => this.copyToClipboard(shelfNumber.split(/\n/g)[index]));
          }
        });
      });

      return htmlString;
    },

    copyToClipboard(text) {
      const el = document.createElement('textarea');
      el.value = text;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
    },

    // 复制
    handleCopy(e) {
      if (e) {
        const el = document.createElement('textarea');
        el.value = e;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // 通知用户已复制
        this.$message({
          message: '复制成功！',
          type: 'success'
        });
      }
    },

    // 删除照片
    handleDel(indx, type) {
      this.form[type].splice(indx, 1);
    },

    // 后边添加上传图片
    handleSuccess(res, file, fileList) {
      this.form.imagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess2(res, file, fileList) {
      this.form.pxImagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess3(res, file, fileList) {
      this.form.pzImagess.push(res.url);
    },

    // 查看
    handleView(row) {
      this.form = row;
      this.viewShow = true;
      this.$nextTick(() => {
        let type = row.status == 1 ? 'attr' : '';
        this.$refs.staylnventoryView.handleShow(type);
      })
    },

    // 游戏品类
    handleGameCategoryChange() {
      this.regionalServers = []
      this.listDictData({
        dictCodeId: this.form.dictCodeId
      });
    },

    // 转问题 图片上传
    handleAvatarSuccess(response, file) {
      // 假设服务器响应的数据中包含了文件路径 'url'
      this.form.images = response.url // 更新 form.image 为服务器返回的 URL
    },

    // 上传图片判断
    beforeAvatarUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const jsJPG = file.type === 'image/jpg'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPEG && !isPNG && !jsJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      return true;
    },

    //选中分类事件
    changeChannel(value) {
      this.form.phoneId = null
      this.form.phoneCode = null
      this.bindingChannelList.forEach(item => {
        if (item.dictCode == value) {
          unboundPhonesByCategory(item.dictValue).then(res => {
            this.phoneList = res.data
            if (this.bindingChannelId == value) {
              this.phoneList.unshift(this.phoneData)
            }
          });
        }
      })
    },

    //选中手机事件
    changePhone(value) {
      this.phoneList.forEach(item => {
        if (item.phoneId == value) {
          this.form.phoneCode = item.phoneCode
          this.form.phoneId = item.phoneId
        }
      })
    },

    /** 查询列表 */
    getList(e) {
      if (e) this.queryParams.pageNum = e;
      this.loading = true
      listManagement(this.queryParams).then(response => {
        this.managementList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    //取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    //表单重置
    reset() {
      this.form = {
        phoneId: null,
        phoneCode: null,
        yingdiId: "",
        imagess: [],
        checkList: []
      };

      // 重置区服列表
      this.regionalServers = [];
      // 重置单选
      this.radioSelections = {}; // 假设初始状态为空对象

      this.resetForm('form')
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.disabled = false;
      this.title = '新增账号';
    },

    //刷新缓存
    refreshCache() {
      refreshCache().then(response => {
        this.$modal.msgSuccess("刷新缓存");
        this.getList()
      })
    },

    // 批量上架
    patchUp() {
      this.progressMsg = {}
      this.shelveOpen = true
      this.progress = 0;
      if (this.ids.length == 0) return this.$message.error('请至少选择一条数据！');
      bulkListings(this.ids).then(res => {
        if (res.code == 200) {
          // this.$message.success('批量上架成功！');
          // this.getList();
          let taskId = res.msg;
          this.startProgressPolling(taskId);
        } else {
          this.$message.error(res.message);
        }
      })
    },

    startProgressPolling(taskId) {
      const intervalId = setInterval(() => {
        getProgress(taskId).then(response => {
          this.progress = response.data.progress; // 更新进度
          let progressMsg = response.data.message
          console.log(progressMsg);
          console.log('progress,,,', this.progress);
          if (this.progress >= 100) {
            clearInterval(intervalId); // 如果进度达到 100%，停止轮询
            this.progressMsg = response.data.message
            console.log('-->', this.progressMsg);
            // this.shelveOpen = false;
            // this.getList();
          }
        }).catch(error => {
          console.error('Error fetching progress:', error);
          clearInterval(intervalId); // 发生错误时停止轮询
        });
      }, 100); // 每秒钟轮询一次
    },

    // 批量下架
    patchDown() {
      if (this.ids.length == 0) return this.$message.error('请至少选择一条数据！');
      bulkDelisting(this.ids).then(res => {
        if (res.code == 200) {
          this.$message.success('批量下架成功！');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      })
    },

    // 修改价格
    confirmUpdatePercentage() {
      if (this.ids.length == 0) return this.$message.error('请至少选择一条记录！');
      updatePercentage(this.Percentageform.percentage, this.Percentageform.status, this.ids).then(res => {
        if (res.code == 200) {
          this.$message.success('修改价格成功');
          this.getList();
          this.Percentageform.status = 1;
          this.Percentageform.percentage = 1;
          this.Percentageform.ids = [];
          this.ids = [];
          this.isPercentage = false//修改价格
        } else {
          this.$message.error(res.message);
        }
      })
    },

    /** 新增 转问题 确认提交 */
    submitForm(text) {
      let dropDownMap = {}, inputValuesObj = {}, radioSelectionsObj = {}, info = {}, checkboxArr = [];
      for (var key in this.form) {
        // 下拉框
        if (key.indexOf('dropDown') > -1) {
          dropDownMap[key.split('_')[1]] = this.form[key];
        }

        // 输入框
        if (key.indexOf('inputValues') > -1) {
          inputValuesObj[key.split('_')[1]] = this.form[key]
        }

        // 单选框
        if (key.indexOf('radioValues') > -1) {
          radioSelectionsObj[key.split('_')[1]] = this.form[key]
        }

        // 多选框
        if (key.indexOf('checkbox') > -1) {
          info[key] = this.form[key];
          checkboxArr = checkboxArr.concat(this.form[key]);
        }
      }

      let attr = {
        radioSelections: radioSelectionsObj,
        dropDown: dropDownMap,
        inputValues: inputValuesObj,
        checkbox: info,
        checkList: checkboxArr
      };
      // 数据组装
      this.form.attribute = attr;
      this.form.answer = JSON.stringify(attr);

      if (this.form.id != null) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (text == 'mark') {
              update(this.form).then(response => {
                this.$modal.msgSuccess('操作成功')
                this.open = false
                this.openProblem = false
                this.getList()
              })
            } else if(text == 'supplier'){
              supplierUpdate(this.form).then(response => {
                this.$modal.msgSuccess('操作成功')
                this.open = false
                this.openProblem = false
                this.getList()
              })
            }
          }
        })
      } else {
        this.$refs['form'].validate(valid => {
          if (valid) {
            addManagement(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        })
      }
    },

    //提号 取消按钮
    cancelNotation() {
      this.openNotation = false
      this.resetNotation()
    },
    // 取消按钮
    cancelresetformSubmitorder() {
      this.submitorderF = false
      this.resetformSubmitorder()
    },
    //提号 表单重置
    resetNotation() {
      this.formNotation = {}
      this.resetForm('formNotation')
    },

    //订单提交 表单重置
    resetformSubmitorder() {
      this.formSubmitorder = {}
      this.resetForm('formSubmitorder')
    },

    /** 提号按钮操作 */
    handleNotation(row) {
      this.resetQuery();
      this.getCodeShow = false;
      const id = row.id
      this.openNotation = true
      this.formNotation = {
        saleAmount: row.saleAmount,
        id,
        recycleAmount: row.recycleAmount,
        version: row.version
      }
    },

    /** 提交订单 */
    submitOrder(row) {
      this.resetQuery();
      this.getSubmitorder = false;
      const id = row.id
      this.submitorderF = true
      this.formSubmitorder = {
        saleAmount: row.saleAmount,
        id,
        recycleAmount: row.recycleAmount,
        version: row.version
      }
    },

    /** 提号 确认提交 */
    submitFormNotation() {
      this.$refs['formNotation'].validate(valid => {
        if (valid) {
          this.getCodeShow = true;

          // 保存销售客服姓名
          let salesCustomer = this.sellList.find(i => i.userId == this.formNotation.salesCustomerId);
          this.$set(this.formNotation, 'saleName', salesCustomer.userName);

          // 换绑客服姓名
          let changeCustomer = this.changeList.find(i => i.userId == this.formNotation.changeId);
          this.$set(this.formNotation, 'changeName', changeCustomer.userName);

          // 检查saleAmount是否小于recycleAmount
          if (this.formNotation.saleAmount < this.formNotation.recycleAmount) {
            // 使用Element UI的MessageBox来提示用户
            const difference = this.formNotation.recycleAmount - this.formNotation.saleAmount;
            this.$confirm(`请检查销售金额是否错误，该账号出售金额小于设定阈值 ${difference} 元，确认提号需等待管理员审核！`, '提示', {
              confirmButtonText: '继续提交',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 用户确认继续提交
              notation(this.formNotation).then(res => {
                this.getCodeShow = false;
                if (res.code == 200) {
                  this.$modal.msgSuccess('提号成功！');
                  this.openNotation = false;
                  this.getList()
                } else {
                  this.$message.error('提号失败！')
                }
              });
            }).catch(() => {
              // 用户取消操作
              this.getCodeShow = false;
            });
          } else {
            //  普通题号
            notation(this.formNotation).then(res => {
              this.getCodeShow = false;
              if (res.code == 200) {
                this.$modal.msgSuccess('提号成功！');
                this.openNotation = false;
                this.getList()
              } else {
                this.$message.error('提号失败！')
              }
            });
          }
        }
      })
    },
// 订单提交
    sformSubmitorder() {
      this.$refs['formSubmitorder'].validate(valid => {
        if (valid) {
          this.getSubmitorder = true;
          {
            // 用户确认继续提交
            submitOrder(this.formSubmitorder).then(res => {
              this.getSubmitorder = false;
              if (res.code == 200) {
                this.$modal.msgSuccess('订单提交成功！');
                this.submitorderF = false;
                this.getList()
              } else {
                this.$message.error('订单提交失败！')
              }
            });
          }
        }
      })
    },

//转问题 取消按钮
    cancelProblem() {
      this.openProblem = false
      this.resetProblem();
      this.resetProblem1();
    },
//修改金额取消
    cancelPercentage() {
      this.isPercentage = false
    },

//转问题 表单重置
    resetProblem() {
      this.formProblem = {}
      this.resetForm('formProblem')
    },
//修改金额取消 表单重置
    resetProblem1() {
      this.Percentageform = {}
      this.resetForm('Percentageform')
    },

    /** 转问题按钮操作 */
    handleDelete(row) {
      this.resetQuery()
      const id = row.id
      this.form = {...row, id}
      this.openProblem = true
    },
    /** 删除按钮操作 */
    delectById(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
        return delManagement(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1);
    },

// 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1
      this.multiple = !selection.length;
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('business/stock/export', {
        ...this.queryParams
      }, `management_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  /*搜索*/
  .search {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;

    ::v-deep.el-form {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px 0px;
      background: #3A84FF;

      .cols {
        margin: 0 10px 10px 0;
      }
    }

    .el-col {
      width: 200px;
    }

    ::v-deep.el-form-item {
      margin-bottom: 0;
    }

    ::v-deep.el-input__inner {
      background: #fff;
      border: 0;
      font-size: 12px;
      width: 200px;
      height: 38px;
      color: #0060FF;
    }

    ::v-deep.el-input {
      border-radius: 8px;
      background: #FAFBFC;
      border: 0.5px solid #A2B3D0;
      overflow: hidden;
      width: 200px;
      height: 38px;
    }

    .btns {
      display: flex;
      align-self: flex-start;

      ::v-deep.el-button {
        background-color: #fff;
        margin-left: 12px;
        color: #3380FD;

        .el-icon-plus {
          &::after {
            content: "";
            font-weight: bold;
          }
        }
      }

      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        margin-left: 12px;
        cursor: pointer;
      }
    }

    /*radio*/
    .el-radio-group {
      width: 100%;
      padding: 20px 20px 10px;
      background: rgba(255, 255, 255, 0.7);

      .el-radio {
        margin-bottom: 8px;
      }

      ::v-deep.el-radio__inner {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #FAFBFC;
        border: 1px solid #D8E4EF;
        overflow: hidden;
        text-align: center;
        line-height: 32px;

        &::after {
          content: "☑️";
          display: block;
          color: #1890FF;
          font-size: 20px;
          width: 30px;
          height: 30px;
          background: #fff;
        }
      }
    }
  }

  .tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .tag {
      font-size: 18px;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
    }

    .tool-btn {
      display: flex;

      .tool-btn-item {
        width: 96px;
        height: 36px;
        line-height: 36px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        color: #2376FE;
        cursor: pointer;

        &:hover {
          background: rgba(17, 107, 255, .01);
        }
      }
    }
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: inline-block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }

    .normal {
      color: #00B3A7;
      background-color: #E0F7FA;
    }

    .tradingIn {
      color: #FFA500;
      background-color: #ffeac9;
    }

    .soldOut {
      color: #FF0000;
      background-color: #ffdada;
    }

    .abnormal {
      color: #FF00FF;
      background-color: #FFE4FF;
    }

    .cancelled {
      color: #a19f9f;
      background-color: #ececec;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}

::v-deep .el-dialog {
  width: 100%;
  opacity: 1;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  p {
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin-bottom: 15px;
    margin-left: 0;
  }

  .el-input {
    .el-input__inner {
      border: 1px solid rgba(127, 127, 213, 0.5);
      border-radius: 10px;
    }
  }

  .el-input-number {
    width: 165px;

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 0px;
      }
    }
  }

  .el-dialog__title {
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 8px;

  }
}

.dialog-footer {
  margin: auto;
  width: 200px;
  padding-top: 50px;
}

.main-title {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  background: #7696FC;
  padding: 6px 20px;
  color: #fff;
  border-radius: 2px;
}

::v-deep.el-checkbox--mini {
  margin-left: 0 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #c1c1c1;
  width: 90px;
  height: 90px;
  cursor: pointer;

  div {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep.el-upload {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.show-img {
  position: relative;
  display: flex;
  margin-right: 8px;
  height: 90px;

  .icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
  }
}

.popover {
  display: flex;
  justify-content: center;

  ::v-deep .el-button {
    width: 56px !important;
    height: 28px !important;
  }
}
</style>
